<!--
 * @Description: 培训课程设计评价表
 * @Autor: dyx
 * @Date: 2023-05-30 14:36:16
 * @LastEditTime: 2023-06-02 17:16:57
-->
<template>
  <div class="TISchedule">
    <div style="padding-right: 7px;">
      <el-button type="primary" style="float:right" @click="exportWord"
        >导出Word</el-button
      >
    </div>
    <div class="mytable" v-loading="loading">
      <div class="table_title">培训课程设计评价表</div>
      <el-row class="gaugeOutfit">
        <el-col :span="12" style="padding-left:10px"
          >培训班名称：
          <input type="text" v-model="dataForm.className" style="width:70%" />
        </el-col>
      </el-row>

      <table>
        <tr>
          <td width="15%">
            要素
          </td>
          <td width="60%" style="padding: 15px 10px">
            内容
          </td>
          <td width="9%">
            分值
          </td>

          <td>
            得分
          </td>
        </tr>
        <tr>
          <td rowspan="2">
            课程目标
          </td>
          <td class="td_Content">
            课程培训目标的清晰度、完整度。
          </td>
          <td>
            10
          </td>
          <td>
            <input
              type="text"
              v-model="dataForm.df1"
              style="width:100%;text-align:center"
              @input="calcNum10('df1')"
            />
          </td>
        </tr>
        <tr>
          <td class="td_Content">
            课程培训目标与培训需求的契合度。
          </td>
          <td>
            10
          </td>
          <td>
            <input
              type="text"
              v-model="dataForm.df2"
              style="width:100%;text-align:center"
              @input="calcNum10('df2')"
            />
          </td>
        </tr>
        <tr>
          <td rowspan="3">
            课程内容
          </td>
          <td class="td_Content">
            课程内容设计与参训者岗位职责及知识背景的符合度。
          </td>
          <td>
            10
          </td>
          <td>
            <input
              type="text"
              v-model="dataForm.df3"
              style="width:100%;text-align:center"
              @input="calcNum10('df3')"
            />
          </td>
        </tr>
        <tr>
          <td class="td_Content">
            课程内容的深度、广度和容量对培训目标的达成度。
          </td>
          <td>
            10
          </td>
          <td>
            <input
              type="text"
              v-model="dataForm.df4"
              style="width:100%;text-align:center"
              @input="calcNum10('df4')"
            />
          </td>
        </tr>
        <tr>
          <td class="td_Content">
            课程内容的各专题安排顺序符合学员的思维逻辑和学习 习惯程度。
          </td>
          <td>
            10
          </td>
          <td>
            <input
              type="text"
              v-model="dataForm.df5"
              style="width:100%;text-align:center"
              @input="calcNum10('df5')"
            />
          </td>
        </tr>
        <tr>
          <td rowspan="2">
            课程结构
          </td>
          <td class="td_Content">
            核心课程重点突出。
          </td>
          <td>
            10
          </td>
          <td>
            <input
              type="text"
              v-model="dataForm.df6"
              style="width:100%;text-align:center"
              @input="calcNum10('df6')"
            />
          </td>
        </tr>
        <tr>
          <td class="td_Content">
            现场教学、研讨交流、视频教学安排合理。
          </td>
          <td>
            10
          </td>
          <td>
            <input
              type="text"
              v-model="dataForm.df7"
              style="width:100%;text-align:center"
              @input="calcNum10('df7')"
            />
          </td>
        </tr>
        <tr>
          <td rowspan="3">
            课程效果
          </td>
          <td class="td_Content">
            培训课程对更新、扩充学员专业知识结构的针对性。
          </td>
          <td>
            10
          </td>
          <td>
            <input
              type="text"
              v-model="dataForm.df8"
              style="width:100%;text-align:center"
              @input="calcNum10('df8')"
            />
          </td>
        </tr>
        <tr>
          <td class="td_Content">
            培训课程对提升学员工作履职能力的实用性。
          </td>
          <td>
            10
          </td>
          <td>
            <input
              type="text"
              v-model="dataForm.df9"
              style="width:100%;text-align:center"
              @input="calcNum10('df9')"
            />
          </td>
        </tr>
        <tr>
          <td class="td_Content">
            培训课程对拓宽学员视野、启发思维的新颖性。
          </td>
          <td>
            10
          </td>
          <td>
            <input
              type="text"
              v-model="dataForm.df10"
              style="width:100%;text-align:center"
              @input="calcNum10('df10')"
            />
          </td>
        </tr>
        <tr>
          <td style="padding: 15px 10px">
            总分
          </td>
          <td colspan="3">{{ total }}</td>
        </tr>
      </table>

      <div class="table_bottom">
        注：此表由参培单位或学员填写。
      </div>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "TISchedule",
  data() {
    return {
      loading: true,
      dataForm: {},
      list: []
    };
  },
  created() {},
  computed: {
    total() {
      let total = 0;
      for (let key in this.dataForm) {
        if (key.indexOf("df") > -1) {
          total += Number(this.dataForm[key]);
        }
      }
      this.dataForm.zf = total.toString();
      return total;
    }
  },
  methods: {
    init(id) {
      this.loading = true;
      request({
        url: "/api/class_archives/generateA14/" + id+`?organizeId=${this.$store.getters.organizeId}`,
        method: "get"
      }).then(res => {
        this.dataForm = res.data;
        // console.log(this.dataForm, 789);
        this.loading = false;
      });
    },
    exportWord() {
      for (let key in this.dataForm) {
        if (Array.isArray(this.dataForm[key])) {
          if (key == "childrenVOList") {
            this.dataForm[key].forEach(item => {
              for (let key2 in item) {
                if (item[key2] == null) {
                  item[key2] = "";
                }
              }
            });
          } else {
            this.dataForm[key] = this.dataForm[key].join(",");
          }
        } else if (this.dataForm[key] == null) {
          this.dataForm[key] = "";
        }
      }
      this.dataForm.organizeId=this.$store.getters.organizeId;
      request({
        responseType: "blob",
        url: "/api/class_archives/generateA14Export",
        method: "post",
        data: this.dataForm
      }).then(res => {
        // console.log(res, 123);
        var debug = res;
        if (debug) {
          var a = document.createElement("a");
          a.download = "培训课程设计评价表.docx";
          a.style.display = "none";
          var blob = new Blob([debug], { type: "application/x-msdownload" });
          a.href = URL.createObjectURL(blob);
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    },
    calcNum10(value) {
      this.dataForm[value] =
        this.dataForm[value] && this.dataForm[value].replace(/[^\d]/g, ""); // 清除“数字”以外的字符
      if (this.dataForm[value] > 10) {
        this.dataForm[value] = "10";
        return;
      }
      return this.dataForm[value] && this.dataForm[value].toString();
    }
  }
};
</script>
<style scoped lang="scss">
// 引入公共样式
@import "./TABLESTYLE.scss";
.td_Content {
  padding: 18px 10px !important;
  text-align: left !important;
}
</style>
